/**
 * Created by v_ailiyajiang on 2016/12/14.
 */
window.onload = function () {
    new Drag('div1');
};

function Drag(id) {
    var _this = this;
    this.disX =0;
    this.disY =0;
    this.oDiv=document.getElementById(id);
    this.oDiv.onmousedown=function (e) {
        _this.fnDown(e);
        return false;
    }
};

Drag.prototype.fnDown=function(e) {
    var _this = this;
    var oEvent = e||event;
    this.disX =oEvent.clientX - this.oDiv.offsetLeft;
    this.disY =oEvent.clientY - this.oDiv.offsetTop;
    document.onmousemove =function (e) {
        _this.fnMove(e);
    }
    document.onmouseup = function () {
        _this.fnUp();
    };
}
Drag.prototype.fnMove = function(e) {
    var _this = this;
    var oEvent = e||event;
    this.oDiv.style.left = oEvent.clientX - this.disX+'px';
    this.oDiv.style.top = oEvent.clientY - this.disY+'px';
}
Drag.prototype.fnUp = function() {
    document.onmousemove = null;
    document.onmouseup = null;
}